<% if (props.stylingPackage?.name === "nativewind") { %>
  import './global.css';
<% } else if (props.stylingPackage?.name === "nativewinui") { %>
  import './global.css';
  import 'expo-dev-client';
<% } %>
<% if (props.stylingPackage?.name === "unistyles") { %>
import './unistyles';
import { DefaultTheme, DarkTheme } from '@react-navigation/native';
import { useUnistyles } from 'react-native-unistyles';
import { useMemo } from 'react';
<% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %>
import { DefaultTheme, DarkTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';
import { useMemo } from 'react';
<% } %>
<% if (props.internalizationPackage?.name === "i18next") { %>
  import './translation';
<% } %>
import "react-native-gesture-handler";

<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
  import { vexo } from 'vexo-analytics';

  vexo(process.env.VEXO_API_KEY); // eslint-disable-line

  import Navigation from "./navigation"; // eslint-disable-line
<% } else { %>
  import Navigation from "./navigation";
<% } %>

export default function App() {
	<% if (props.stylingPackage?.name === "unistyles")  { %> 
    const { theme, rt } = useUnistyles();

    const baseTheme = rt.colorScheme === 'dark' ? DarkTheme : DefaultTheme;
    const mergedTheme = useMemo(() => ({
      ...baseTheme,
      colors: {
        ...baseTheme.colors,
        background: theme.colors.background,
        text: theme.colors.typography,
        primary: theme.colors.astral,
        secondary: theme.colors.cornflowerBlue,
        border: theme.colors.limedSpruce,
        card: theme.colors.background,
        notification: theme.colors.astral,
      },
    }), [baseTheme, theme.colors.background, theme.colors.typography, theme.colors.astral, theme.colors.cornflowerBlue, theme.colors.limedSpruce]);

    return <Navigation theme={mergedTheme} />;
	<% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> 
		const colorScheme = useColorScheme();
		const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);

		return <Navigation theme={theme} />;
	<% } else { %> 
		return <Navigation />;
	<% } %>
}
